<script setup lang="ts">
import router from '@/router';
import { useHeaderStore } from '@/stores'
import { storeToRefs } from 'pinia';
const {userInfo,item_function} = storeToRefs(useHeaderStore())
const { handleCommand,exitLogin } = useHeaderStore()


</script>

<template>
    <div class="common-layout" style="height: 100%;margin: 0;padding: 0;">
        <!-- 主页框架 -->
        <el-container>
            <!-- 导航栏 -->
            <el-header height="60px" class="header" style="background-color: skyblue;">
                <div id="header">
                    <div id="logo">
                        <el-link :underline="false" @click="()=>{router.push('/')}">
                            <img src="@/assets/Sakura.svg" alt="无法显示" style="width: 45px;">
                        </el-link>
                    </div>
                    <div id="slogan">
                        <h2 style="color: white;">Api接口平台</h2>
                    </div>

                    <div id="function">
                        <div class="item-function" v-for="item in item_function" :key="item.id">
                            <el-link :href="item.url" :underline="false">
                                <span style="color: white;font-size: 16px">{{ item.name }}</span>
                            </el-link>
                        </div>
                    </div>
                    <div id="user">
                        <!-- 下拉菜单 -->
                        <el-dropdown @command="handleCommand">
                            <div class="flex_base">
                                <div>
                                    <el-avatar :src="userInfo.avatarUrl || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
                                        :size="33" style="margin-top:3px;" />
                                </div>
                                <span class="flex_base" style=" font-size: 1.2em;color: white; margin-left: 5px;">{{ userInfo.nickname || '未登录'}}</span>
                            </div>
                            <template #dropdown>
                                <el-dropdown-menu v-if="userInfo.nickname">
                                    <el-dropdown-item command="/userInfo">个人资料</el-dropdown-item>
                                    <el-dropdown-item command="/system">系统设置</el-dropdown-item>
                                    <el-dropdown-item command="/loginChange">切换账号</el-dropdown-item>
                                    <el-dropdown-item command="/login" divided>
                                        <el-text type="danger" @click="exitLogin()">退出登录</el-text>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                                <el-dropdown-menu v-else>
                                    <el-dropdown-item command="/login">前往登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>

                    </div>
                </div>
            </el-header>
            <!-- 路由主体部分 -->
            <el-main class="content">
                <router-view />
            </el-main>
        </el-container>
    </div>
</template>

<style scoped>
#header {
    height: 60px;
    /* 调整为与el-header的高度一致 */
    /* background-color: rgb(48, 230, 133); */
    /* border: 1px solid #000; */
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
    justify-content: space-between;
    /* 使元素分散在两边，并自然居中slogan */
    padding: 0 20px;
    /* 添加内边距以创建gap效果，替代gap属性（gap属性在某些老版本浏览器可能不支持） */
}

#slogan {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translate(-50%, -50%);
}

#function {
    width: 350px;
    /* background-color: gold; */
    display: flex;
    margin-left: 60%;
    align-items: center;
    gap: 10px
}

.item-function {
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.content {
    padding: 0;
}

/* 解决下拉菜单的黑框问题 */
:deep(.el-tooltip__trigger:focus-visible) {
      outline: unset;
}

.flex_base {
    display: flex;
    align-self: center;
}
</style>